<!DOCTYPE html>
<html lang="en">

<head>
    <title>选择学校</title>
    <#include "/lx/activity/components/meta.html" />
    <#include "/lx/activity/components/stylesheets.html" />
    <link rel="stylesheet" href="/lx/activity/stylesheets/selectSchool.css?v=4">
</head>

<body>
    <div id="app">
        <div class='top'>
            <div class='search'>
                <div class='search-input'>
                    <input type='text' placeholder='请输入所读大学' v-model="keyword" @change="search" />
                </div>
                <div class='clear-button' @click="clearKeyword">
                    <img src="/lx/activity/assets/img/cross.png" v-if="keyword"></img>
                </div>
                <div class='search-icon'>
                    <img src="/lx/activity/assets/img/search.png"></img>
                </div>
            </div>
            <div>
                <div class='filter-wrap'>
                    <div class="filter-item" :class="{ 'filter-item-checked': countryIndex === index }" v-for="(item, index) in countryArray" :key="index" @click="onFilterChange(index)">{{ item }}</div>
                </div>
            </div>
        </div>
        <div class='results'>
            <div class='result-item' v-for="(item, index) in list" :key="item.id" @click="selectSchool(item)">
                <div class='result-item-name'>{{ item.certificateName }}<br />{{ item.certificateNameEn }}</div>
                <div class='result-item-right'>
                    <img src="/lx/activity/assets/img/arrow1.png"></img>
                </div>
            </div>
        </div>
    </div>
    <#include "/lx/activity/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                keyword: '',
                timeoutVar: null,
                pageNumber: 1,
                totalPage: 1,
                schoolType: Number('${type!0}'), // 0本科院校 1硕士院校

                countryArray: [],
                countryIndex: 0,
                pageIndex: null
            }
        },
        mounted: function() {
            this.pageIndex = parent.layer.getFrameIndex(window.name);
            this.init();
        },
        methods: {
            init() {
                var self = this;
                var url = '/lx/mini/user/schoolCountries';
                var params = {};
                var success = function (res) {
                    self.countryArray = res.info;
                    self.load();
                };
                var fail = function (res) {};
                var complete = function (res) {};
                request(url, params, success, fail, complete);
            },
            load() {
                var self = this;
                var url = '/lx/mini/user/schools';
                var params = {
                    kw: self.keyword,
                    country: self.countryArray[self.countryIndex],
                    page: self.pageNumber
                };
                var success = function (res) {
                    self.list = res.info.list;
                    self.pageNumber = res.info.pageNumber;
                    self.totalPage = res.info.totalPage;
                };
                var fail = function (res) {};
                var complete = function (res) {};
                request(url, params, success, fail, complete);
            },
            search(e) {
                var self = this;
                self.list = new Array;
                clearTimeout(self.timeoutVar);
                var t = setTimeout(function() {
                    self.pageNumber = 1;
                    self.load();
                }, 500);
                self.timeoutVar = t;
            },
            clearKeyword() {
                this.keyword = '';
                this.load();
            },
            onFilterChange(index) {
                this.countryIndex = index;
                this.pageNumber = 1;
                this.load();
            },
            selectSchool(item) {
                if (this.schoolType === 0) {
                    parent.app.undergradSchool = item.id;
                    parent.app.undergradSchoolName = item.certificateName;
                } else if (this.schoolType === 1) {
                    parent.app.postgradSchool = item.id;
                    parent.app.postgradSchoolName = item.certificateName;
                }
                parent.layer.close(this.pageIndex);
            }
            // scrollToBottom(e) {
            //     console.log(self.data.pageNumber + "/" + self.data.totalPage);
            //     if (self.data.pageNumber >= self.data.totalPage) {
            //         return;
            //     }
            //     self.setData({
            //         pageNumber: self.data.pageNumber + 1
            //     })
            //     wx.showLoading({
            //         title: '加载中'
            //     })
            //     wx.request({
            //         url: host + '/lx/mini/user/schools',
            //         data: {
            //             kw: self.data.keyword,
            //             country: self.data.countryArray[self.data.countryIndex],
            //             page: self.data.pageNumber
            //         },
            //         success: function(res) {
            //             if (res.data.status == 200) {
            //                 var list = self.data.list.concat(res.data.info.list);
            //                 self.setData({
            //                     list: list,
            //                     pageNumber: res.data.info.pageNumber,
            //                     totalPage: res.data.info.totalPage
            //                 });
            //             } else {
            //                 console.log("error: " + res.data.msg);
            //             }
            //         },
            //         complete: function() {
            //             wx.hideLoading();
            //         }
            //     })
            // }
        }
    })
    </script>
    <script>
    // wx.ready(function() {
    //     initWXShare()
    // })
    </script>
</body>

</html>